<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Bus Channels')"></h3>
    </template>
    
    <el-row :gutter="8">
      <el-col v-for="row in 12" :key="row" :span="24">
        <el-row :gutter="8">
          <el-col v-for="col in 4" :key="col" :span="6">
            <div style="display: flex; align-items: center;">
              <div style="flex: 0 0 50%;">
                <span >{{ getChannelTitle((row-1)*4 + col) }}</span>
              </div>
              <div style="flex: 0 0 50%;">
                <span>{{ getChannelStatus((row-1)*4 + col) }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { useBusChannelsStore } from '@/stores/busChannels'
import { useLanguageStore } from '@/stores/language'

const busChannelsStore = useBusChannelsStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Bus Channels': {
      'en': 'Bus channels',
      'zh': '总线通道'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}

const getChannelTitle = (index) => {
  return `CH${index}`
}

const getChannelStatus = (index) => {
  return busChannelsStore.channelStatuses[index - 1] || '---'
}
</script> 